<template>
  <q-page class="q-pa-md wrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-image src="/svgs/titleIcon.svg" style="width: 17px;margin: 0 10px 0 0" fit />
        <el-breadcrumb-item>{{ $t('dataCenter') }}</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #333;">{{ $t('dataProcessing') }}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="datasetBox">
      <div class="contentBox_title">{{ $t('dataProcessing') }}</div>
      <div class="contentBox">
        <el-row class="mb-4 " style="margin-bottom: 15px;">
          <div>
            <el-input
              v-model.trim="searchName"
              placeholder="搜索任务名称"
              spellcheck="false"
              @keyup.enter="handlePageEvent"
            >
              <template #append>
                <el-button :icon="Search" @click="handlePageEvent" />
              </template>
            </el-input>
          </div>
          <div class="rightBox">
            <el-button type="primary" @click="toCreateData">{{ $t('newBuilt') }}</el-button>
          </div>
        </el-row>
        <el-table
          :cell-style="cellStyle"
          :data="tableData.results" style="font-size: 14px;"
          :header-cell-style="{
            background: '#f9f9f9',
            color: '#333333',
            fontWeight: '500',
            fontSize: '14px',
            textAlign: 'left',
            height: '56px'
          }"
          stripe>
          <el-table-column align="left" prop="title" label="名称" />
          <el-table-column align="left" prop="dataset_type" label="类型" />
          <el-table-column align="left" prop="create_time" label="创建时间" />
          <el-table-column align="left" prop="status" label="状态" >
            <template #default="scope">
              <span>{{ statusToLanguage(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="description" label="描述" >
            <template #default="scope">
              <span>{{ scope.row.description?scope.row.description: '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" >
            <template #default="scope">
              <el-button link type="primary" size="small" @click="deleteDialogHandle(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row">
        <el-pagination
          class="elPagination"
          background
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.page_size"
          layout="total, prev, pager, next, sizes, jumper"
          :total="tableData.count"
          :page-sizes="[10, 20, 50]"
          @size-change="sizeChange"
          @current-change="changePage"
        />
      </div>
    </div>
    <deleteDialog ref="deleteDialogRef" @submit="handleSubmit" :content="message" :title="title" :colorStyle="{ color: '#FFA940' }"></deleteDialog>
  </q-page>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue"
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import {dataSetStore} from "src/stores/dataSet";
const router = useRouter();
const projectId = router.currentRoute.value.params.project_id;
const pageData = dataSetStore().pageData;
const taskId = ref('');
import deleteDialog from 'components/delDialog.vue'


let tableData = ref({
  count: 0,
  next: null,
  previous: null,
  results: [],
});
let message = ref('确定删除以下文件吗？删除后不可恢复，请谨慎操作！');
let title = ref('删除提醒');
const searchName = ref('');
let deleteDialogRef = ref();

import {
  getProcessList, //获取数据处理列表
  getDeleteTask, //删除数据处理
} from "src/api/dataset";
import {ElMessage} from "element-plus";
function toCreateData() {
  router.push({ name: 'data-process-create', params: { project_id: projectId } })
}
function statusToLanguage(val:any){
  if (val === 'running') {
    return '进行中';
  } else if (val === 'fail') {
    return '失败';
  } else if (val === 'success') {
    return '成功';
  } else {
    return '无';
  }
}

// 切换页
function changePage(currentPage: any) {
  dataSetStore().setPageData(currentPage);
  initPageEvent();
}

function handlePageEvent () {
  dataSetStore().setPageData(1);
  initPageEvent();
}
function sizeChange(pageSize: any) {
  dataSetStore().setPageData(1);
  dataSetStore().setPageSizeData(pageSize);
  initPageEvent();
};
initPageEvent();//页面初始化事件
function initPageEvent(){
  let obj:any = {};
  if( searchName.value != '' ) obj.title = searchName.value;
  obj = Object.assign(obj, pageData);
  getProcessList(projectId,obj).then( (res:any) =>{
    tableData.value = res.data;
  })
}

function deleteDialogHandle(row:any){
  taskId.value = JSON.parse(JSON.stringify(row)).id;
  deleteDialogRef.value.show();
}
function handleSubmit() {
  getDeleteTask(projectId,taskId.value).then( (res:any) =>{
    ElMessage.success('删除成功！');
    initPageEvent();
  });
}

const cellStyle = () =>{
  return { height: '56px',backgroundColor: '#fff' };
}
</script>

<style scoped lang="scss">
.wrapBox {
  padding: 0 !important;
  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;
    ::v-deep .el-breadcrumb{
      display: flex;
      align-items: center;
    }
  }
  .datasetBox {
    margin: 0 20px;
    .contentBox_title{
      color: var(--title);
      font-weight: 500;
      font-size: 16px;
      padding: 15px 15px;
      border-bottom: 1px solid #e5e6eb;
      background-color: #ffffff !important;
    }
    .contentBox {
      padding: 22px 12px 12px 12px;
      background-color: #ffffff !important;
    }
  }
}

.datasetBox{
  position: relative;
  .row {
    justify-content: flex-end;
    margin-top: 10px;
    background-color: #fff;
    padding: 10px 0
  }
}
//输入框placeholder样式
::v-deep .el-input__inner {
  &::placeholder {
    color: #ccc;
    font-size: 14px;
  }
  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #ccc;
    font-size: 14px;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #ccc;
    font-size: 14px;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #ccc;
    font-size: 14px;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #ccc;
    font-size: 14px;
  }
}
//分页输入框跳转不限制
::v-deep disabled,::v-deep  .disabled *, ::v-deep [disabled],::v-deep [disabled] * {
  outline: 10px !important;
  cursor: pointer !important;
}
//点击下拉框，去掉输入框蓝色高亮显示
:deep(.el-input){
  --el-input-focus-border:#fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color:var(--el-border-color);
  --el-input-hover-border:0px !important;
  --el-input-hover-border-color:var(--el-border-color);
  --el-input-focus-border-color:var(--el-border-color);
  --el-input-clear-hover-color:var(--el-border-color);
}
.rightBox {
  position: absolute;
  right: 0;
}
</style>
